<script setup lang="ts">
import type { CategoryItem } from '@/types/home';
import { defineProps } from 'vue';

// 定义 props 接收数据
defineProps<{
  list: CategoryItem[]
}>()
</script>

<template>
  <view class="category">
    <navigatior
      class="category-item"
      hover-class="none"
      url="/pages/index/index"
      v-for="item in list"
      :key="item.id"
    >
      <image
        class="icon"
        :src="item.icon"
      ></image>
      <text class="text">{{ item.name }}</text>
    </navigatior>
  </view>
</template>

<style lang="scss">
  /** 前台项目 */
  .category {
    margin: 20rpx 0 0;
    padding: 10rpx 0;
    display: flex;
    flex-wrap: wrap;
    min-height: 328rpx;

    .category-item {
      width: 20%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;

      .icon {
        width: 100rpx;
        height: 100rpx;
      }

      .text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
</style>